<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>工作台账</title>
  <link rel="stylesheet" href="../css/bootstrap.min.css">
  <script src="./../js/index.js"></script>
  <style>
    body {
      font-size: 0.8rem;
    }

    .right-margin {
      margin-left: auto;
      text-align: right;
    }

    td:nth-child(5) {
      width: 50%;
    }

    td:nth-child(2) {
      width: 8%;
    }

    td:nth-child(4) {
      width: 5%;
    }

    td:first-child {
      width: 3%;
    }

    .my-input {

      //width: 200px;
      //	height: 30px;
    }

    .form-control {
      font-size: 0.8rem;
      padding: 0 0;
    }

    .table>:not(caption)>*>* {
      padding: .1rem .1rem;

    }
  </style>
</head>

<body>
  <div id="app" class="container-xl">
    设置监控员：
    <div class="row">
      <div class="col">
        <input type="text" class="form-control my-input" v-model="monitorAM" placeholder="监控员" :disabled="displayFlag">
      </div>
      <div class="col">
        <input type="text" class="form-control my-input" v-model="monitorPM" placeholder="监控员" :disabled="displayFlag">
      </div>
      <div class="col">
        <button type="button" class="btn btn-sm btn-primary" @click="saveMonitor">保存</button>
        <button type="button" class="btn btn-sm btn-warning" @click="clearMonitor">重置</button>
      </div>
    </div>



    <br>
    <div class="container-xl">
      <div style="height: 400px; overflow: auto;">
        <table class="table table-hover">
          <thead>
            <tr>
              <th>序号</th>
              <th>时间</th>
              <th>车牌号</th>
              <th>速度</th>
              <th>车辆位置</th>
              <th>驾驶员
              <!-- <th>监控员</th> -->
              <th>轨迹/位置</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item, index) in trajectoryInfoArray" :key="item.id" v-show="trajectoryInfoArray.length!=0">
              <td>{{item.id}}</td>
              <td><input type="text" class="form-control" v-model="item.samplingTime"></td>
              <td @click="copyTextlicensePlateByid(item.id)"><a href="#">{{item.licensePlate}}</a></td>
              <td>{{item.speed}}</td>
              <td>{{item.position}}</td>
              <td>{{item.driver}}</td>
              <!-- <td>{{item.monitor}}</td> -->
              <td>{{item.msg}}</td>
              <td @click="updateNoDate(item.id)"><a href="#">暂无数据</a></td>
              <td></td>
            </tr>

          </tbody>
        </table>
      </div>

      <div class="container-xl">
        <span id="cp2" style="font-size: 30px;color: #f20d0d;">复制成功！</span>

      </div>

      <div class="container-xl right-margin">
        
        <!-- <button type="button" class="btn btn-primary" @click="clearData()">清空数据</button> -->
        夜班：<span style="color: red;">{{this.nightCount}}</span>&nbsp;&nbsp;早班：<span style="color: red;">{{this.amCount}}</span>&nbsp;&nbsp;中班：<span style="color: red;">{{this.pmCount}}</span>
        <button type="button" class="btn btn-sm btn-primary"
          @click="sortedItems()">排序并复制</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="button" class="btn btn-sm btn-danger" @click="reloadPage()">刷新页面</button>
        <!-- <button type="button" class="btn btn-primary" @click="copyArrayDate()">复    制</button> -->
      </div>
      <br>

      <div class="container-xl">
        <div class="row">
          <textarea class="form-control" rows="12" v-model="inputInfo" placeholder="新增台账/车牌和司机"></textarea>
          <!-- <textarea class="form-control" v-model="licensePlateList" rows="6" placeholder="导入车牌"
                        v-show="trajectoryInfoArray.length==0"></textarea> -->
        </div>

      </div>
    </div>
  </div>

  </div>
  <script src="./../js/vue.js"></script>
  <script>

    const app = new Vue({
      el: '#app',
      data: {
        msg: '',
        carCodeArray: [],
        inputStr: '',
        inputInfo: '',
        copyTextarea: '',
        licensePlateList: '',
        selectKey: '',
        monitorAM: '',
        monitorPM: '',
        displayFlag: '',
        //msg:''
        carInfo: {
          str1: '',
          str2: '',
          str3: '',
          str4: ''
        },
        trajectoryInfo: {
          id: '',
          samplingTime: '',//抽查时间
          licensePlate: '',//车牌
          speed: '',//速度
          position: '',//位置
          driver: '',//司机
          abnormalSituation: '无异常',//异常情况，默认无异常
          monitor: '',//监控员
          msg: ''
        },
        trajectoryInfoArray: [],
        amCount: 0,
        pmCount: 0,
		nightCount: 0

      },
      created ()
      {
        // 设置定时器定时更新
        this.timer = setInterval(() =>
        {

          this.handlelicensePlateList()
          this.handleNoPosition()
          this.handleHavePosition()
          this.countAMPM()

          this.msg = this.msg.trim();


        }, 500);

        var cp2 = document.getElementById("cp2"); //
        cp2.style.display = "none";
        let monitorName = JSON.parse(localStorage.getItem("monitorName")) || ''

        console.log(monitorName == '')
        if (monitorName == '') {
          this.displayFlag = false
        } else {
          this.displayFlag = true
        }


        this.monitorAM = monitorName.monitorAM
        this.monitorPM = monitorName.monitorPM
      },

      beforeDestroy ()
      {
        // 清除定时器以避免内存泄漏
        clearInterval(this.timer);
      },
      methods: {

        countAMPM ()
        {
          this.amCount = 0
          this.pmCount = 0
		  this.nightCount = 0

          this.trajectoryInfoArray.forEach((selectKey, index, array) =>
          {

            if (array[index].samplingTime != '') {

              if (array[index].samplingTime === undefined) {

              } else {
                if (parseInt(array[index].samplingTime.replace(/:/g, "")) < 80000) {
                  this.nightCount += 1
                }
				else if (parseInt(array[index].samplingTime.replace(/:/g, "")) < 160000) {
                  this.amCount += 1
                }
                else {
                  this.pmCount += 1
                }

              }



            }


          });


        },

        reloadPage ()
        {
          location.reload();
        },


        sortMethod ()
        {

          const num = [{ 'tm': '13:20:03', 'aa': '123', 'bb': '13:20:03' }, { 'tm': '13:10:03', 'aa': '123', 'bb': '13:20:03' }, { 'tm': '13:50:03', 'aa': '123', 'bb': '13:20:03' }]
          num.sort((a, b) =>
          {

            return parseInt(a.tm.replace(/:/g, "")) - parseInt(b.tm.replace(/:/g, ""));
          })
          console.log(num)

        },

        sortedItems ()
        {

          console.log("开始排序-----------")
          this.trajectoryInfoArray = this.trajectoryInfoArray.sort((a, b) =>
          {
            return parseInt(a.samplingTime.replace(/:/g, "")) - parseInt(b.samplingTime.replace(/:/g, ""));
          });

          console.log(this.trajectoryInfoArray)

          this.trajectoryInfoArray = this.trajectoryInfoArray.map((item, index) =>
          {

            return item;
          });


          this.trajectoryInfoArray.forEach((selectKey, index, array) =>
          {
            if (array.length / 2 > index) {
              array[index].monitor = this.monitorAM
            } else {
              array[index].monitor = this.monitorPM
            }

          });
          this.copyArrayDate()
        },

        copyTextlicensePlateByid (id)
        {

          this.selectKey = id

          try {

            console.log(this.selectKey)
            let found = this.trajectoryInfoArray.filter(item => item.id === this.selectKey);
            console.dir(found[0].licensePlate)
            const textToCopy = found[0].licensePlate;
            navigator.clipboard.writeText(textToCopy);
            console.log("文本已复制到剪贴板", found[0].licensePlate);


            // this.trajectoryInfoArray.forEach((value, index, array) => {
            //     array[index].msg = ''
            // });
            // found[0].msg = '已复制'
          } catch (error) {
            console.error("复制到剪贴板失败:", error);
          }

        },

        copyArrayDate ()
        {

          let textToCopy = ''

          for (var i = 0; i < this.trajectoryInfoArray.length; i++) {

            textToCopy = textToCopy + this.trajectoryInfoArray[i].samplingTime
              + '\t' + this.trajectoryInfoArray[i].licensePlate
              + '\t' + this.trajectoryInfoArray[i].speed
              + '\t' + this.trajectoryInfoArray[i].position
              + '\t' + this.trajectoryInfoArray[i].driver
              + '\t' + ""
              + '\t' + ""
              + '\t' + ""
              + '\t' + ""
              + '\t' + '无异常'
              + '\t' + ""
              + '\t' + this.trajectoryInfoArray[i].monitor
              + '\n'
          }
          navigator.clipboard.writeText(textToCopy);

        },


        // copyTextlicensePlate() {
        //     try {

        //         console.log(this.selectKey)
        //         let found = this.trajectoryInfoArray.filter(item => item.id === this.selectKey);
        //         console.dir(found[0].licensePlate)
        //         const textToCopy = found[0].licensePlate;
        //         navigator.clipboard.writeText(textToCopy);
        //         console.log("文本已复制到剪贴板", found[0].licensePlate);


        //         this.trajectoryInfoArray.forEach((value, index, array) => {
        //             array[index].msg = ''
        //         });
        //         found[0].msg = '已复制'
        //     } catch (error) {
        //         console.error("复制到剪贴板失败:", error);
        //     }


        // },

        clearMonitor ()
        {
          localStorage.removeItem("monitorName")

          this.monitorAM = ''
          this.monitorPM = ''
          this.displayFlag = false
        },

        saveMonitor ()
        {

          if (this.monitorAM.trim() == '' || this.monitorPM.trim() == '') {

            return false
          }
          this.monitorAM = this.monitorAM.trim()
          this.monitorPM = this.monitorPM.trim()
          monitorName = {}
          monitorName.monitorAM = this.monitorAM
          monitorName.monitorPM = this.monitorPM
          localStorage.setItem("monitorName", JSON.stringify(monitorName));
          this.displayFlag = true
        },

        handlelicensePlateList ()
        {

          this.licensePlateList = this.inputInfo
          if (this.licensePlateList == '') {

            return false
          }


          if (this.licensePlateList.trim() === '') {

            return false
          }
          let array = this.licensePlateList.split('\n')
          if (array[0].split('\t').length != 4) {
            return false
          }
          this.inputInfo = ''

          let id = 1

          for (var i = 0; i < array.length; i++) {
            let temp = array[i].split('\t')
            //if (temp.length != 4) {
            //    return false
            //}
            if (temp[0].trim().indexOf('粤') == -1) {
              return false
            }

            let trajectoryInfo = {}
            trajectoryInfo.id = id++
            trajectoryInfo.licensePlate = temp[0]
            if (typeof temp[3] === 'undefined') {
              trajectoryInfo.driver = ''
            } else {
              trajectoryInfo.driver = temp[3]
            }

            this.trajectoryInfoArray.push(trajectoryInfo)
          }
          this.licensePlateList = ''
          this.inputInfo = ''
          console.dir(this.trajectoryInfoArray);



        },

        //插入暂无数据信息
        updateNoDate (selectKey)
        {

          console.log(selectKey)
          // let arrayInfo = this.trajectoryInfoArray.filter(item => item.id === selectKey)[0];
          // console.log(arrayInfo)
          // arrayInfo.position = '暂无数据'

          let arrayInfo = this.trajectoryInfoArray.filter(item => item.id === selectKey)[0];
          if (arrayInfo.position == '暂无数据') {
            arrayInfo.position = ''
            arrayInfo.samplingTime = '00:00:00'
            arrayInfo.speed = ''

          } else {
            arrayInfo.position = '暂无数据'
            arrayInfo.samplingTime = '00:00:00'
            arrayInfo.speed = ''
            console.log(this.trajectoryInfoArray[selectKey - 1])
          }



          this.trajectoryInfoArray = this.trajectoryInfoArray.map((item, index) =>
          {

            return item;
          });


          // this.trajectoryInfoArray.forEach((selectKey, index, array) => {
          //         array[selectKey-1].position = '暂无数据'
          //     });

        },

        copyText ()
        {

          var select = document.getElementById("msg")
          select.select(); //选中textarea中的内容
          try {
            var successful = document.execCommand('copy'); //执行复制命令
            if (successful) {
              console.log('成功复制！');
              if (select.value != '') {
                var cp2 = document.getElementById("cp2"); //
                cp2.style.display = "block";
              }

            } else {
              console.log('无法复制！');
            }
          } catch (err) {
            console.error('无法复制！', err);
          }


        },


        //无轨迹的数据
        handleNoPosition ()
        {

          if (this.inputInfo.trim().indexOf('定位位置') != -1) {
            return false
          }
          if (this.inputInfo.trim().indexOf('km/h') == -1) {
            return false
          }
          if (this.inputInfo.trim() == '') {

            return false
          }
          let noDatainfo = this.inputInfo.trim()
          console.log("数组noDatainfo-------------" + noDatainfo)
          var strArray = noDatainfo.split('\n')
          if (strArray.length != 9 && strArray.length != 10) {
            console.log("数组-------------" + strArray)
            return false
          }



          if (strArray[1].trim().indexOf('粤') == -1) {
            return false
          }

          if (strArray[2].trim().indexOf('色') == -1) {
            return false
          }

          if (strArray.length == 9 && strArray[6].trim().indexOf('km/h') == -1) {
            return false
          }

          if (strArray.length == 10 && strArray[7].trim().indexOf('km/h') == -1) {
            return false
          }
          let licensePlate = strArray[1] //车牌
          let position
          let samplingTime
          if (strArray.length == 9) {
            position = strArray[7]
            samplingTime = strArray[8].substring(11).trim()
          }
          if (strArray.length == 10) {
            position = strArray[8]
            samplingTime = strArray[9].substring(11).trim()
          }
          //位置

          let arrayInfo = this.trajectoryInfoArray.filter(item => item.id === this.selectKey)[0];


          if (this.selectKey == '') {

            // arrayInfo = this.trajectoryInfoArray.filter(item => item.licensePlate === licensePlate)[0];

            // if (arrayInfo == '' && arrayInfo.position != '') {
            //   arrayInfo = this.trajectoryInfoArray.filter(item => item.licensePlate === licensePlate)[1];
            // }

            // if (arrayInfo == '' && arrayInfo.position == '') {
            //   arrayInfo = this.trajectoryInfoArray.filter(item => item.licensePlate === licensePlate)[1];
            // }
            // arrayInfo.msg = "位置"

            // if (arrayInfo == undefined) {

            //   return false
            // }
            // console.log(arrayInfo)

            // arrayInfo.position = position
            // arrayInfo.speed = 0
            // arrayInfo.samplingTime = samplingTime
            return

          } else {
            if (arrayInfo.licensePlate === licensePlate) {
              arrayInfo.position = position
              arrayInfo.speed = 0
              arrayInfo.samplingTime = samplingTime
              arrayInfo.msg = "位置"
              this.selectKey = ''
              this.inputInfo = ''
            }
          }
          
          


        },
        // 解析有轨迹数据
        handleHavePosition ()
        {


          if (this.inputInfo == '') {
            return
          }
          let info = this.inputInfo.trim()

          let strArray = info.split('\n')

          if (strArray.length != 9) {

            return
          }


          trajectoryInfo = {}
          // 校验车牌
          if (strArray[0].indexOf('粤') == -1) {
            console.log("不包含车牌-------------")
            return false
          }

          //校验定位时间
          if (strArray[2].indexOf('定位时间') == -1) {
            console.log("不包含定位时间-------------")
            return false
          }

          //校验定位位置
          if (strArray[8].indexOf('定位位置') == -1) {
            console.log("不包含定位位置-------------")
            return false

          }

          //校验行驶速度	
          if (strArray[5].indexOf('行驶速度') == -1) {
            console.log("不包行驶速度-------------")
            return false

          }

          trajectoryInfo.licensePlate = strArray[0].trim()//车牌

          trajectoryInfo.samplingTime = strArray[2].substring(17).trim()

          trajectoryInfo.position = strArray[8].substring(6).trim()

          let strPosition7 = strArray[5].indexOf('km/h')
          trajectoryInfo.speed = Math.round(strArray[5].substring(6, strPosition7).trim())

          let arrayInfo = this.trajectoryInfoArray.filter(item => item.id === this.selectKey)[0];



          console.log(arrayInfo)
          if (this.selectKey == '') {
            // arrayInfo = this.trajectoryInfoArray.filter(item => item.licensePlate === trajectoryInfo.licensePlate)[0];

            // if (arrayInfo != '' && arrayInfo.position != '') {

            //   arrayInfo = this.trajectoryInfoArray.filter(item => item.licensePlate === trajectoryInfo.licensePlate)[1];
            // }

            // if (arrayInfo != '' && arrayInfo.position == '') {

            //   arrayInfo = this.trajectoryInfoArray.filter(item => item.licensePlate === trajectoryInfo.licensePlate)[1];
            // }

            // if (typeof arrayInfo === 'undefined') {


            //   return false
            // }
            // console.log(arrayInfo)
            // arrayInfo.msg = "轨迹"

            // arrayInfo.position = trajectoryInfo.position
            // arrayInfo.speed = trajectoryInfo.speed
            // arrayInfo.samplingTime = trajectoryInfo.samplingTime
            return


          } else {
            if (arrayInfo.licensePlate === trajectoryInfo.licensePlate) {
              arrayInfo.position = trajectoryInfo.position
              arrayInfo.speed = trajectoryInfo.speed
              arrayInfo.samplingTime = trajectoryInfo.samplingTime
              arrayInfo.msg = "轨迹"
              this.inputInfo = ''
              this.selectKey = ''
            }
          }
          
         

          // carInfo = new Object();
          // carInfo.str1 = str1
          // carInfo.str2 = str2
          // carInfo.str3 = Math.round(str3)
          // carInfo.str4 = str4
          // this.carCodeArray.push(carInfo)
          // this.inputInfo = ''
          // this.msg = ''
          // for (var i = 0; i < this.carCodeArray.length; i++) {

          //     this.msg = this.msg + this.carCodeArray[i].str1 + '\t' + this.carCodeArray[i].str2 + '\t' + this.carCodeArray[i].str3 + '\t' + this.carCodeArray[i].str4 + '\n'
          // }

        }
      }

    })



  </script>
  <script src="../js/bootstrap.bundle.min.js"></script>
</body>

</html>